<template>
  <view class="join-family-container">
    <view class="header">
      <text class="title">加入家庭</text>
      <text class="subtitle">输入邀请码加入家庭</text>
    </view>
    
    <view class="form-section">
      <view class="input-group">
        <text class="label">邀请码</text>
        <view class="input-container">
          <input 
            class="input" 
            v-model="inviteCode" 
            placeholder="请输入家庭邀请码"
            maxlength="20"
            :disabled="loading"
          />
          <view class="scan-btn" @click="scanQRCode" v-if="!loading">
            <text class="scan-icon">📷</text>
          </view>
        </view>
      </view>
      
      <button 
        class="join-btn" 
        @click="handleJoin" 
        :disabled="!inviteCode.trim() || loading"
        :class="{ loading: loading }"
      >
        <text v-if="loading">加入中...</text>
        <text v-else>加入家庭</text>
      </button>
      
      <view class="tips">
        <text class="tip-text">💡 提示：请向家庭创建者索要邀请码，或扫描二维码快速加入</text>
      </view>
    </view>
  </view>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'JoinFamily',
  data() {
    return {
      inviteCode: '',
      loading: false
    }
  },
  
  onLoad(options) {
    // 如果从其他页面传递了邀请码，自动填充
    if (options.inviteCode) {
      this.inviteCode = options.inviteCode
    }
  },
  
  methods: {
    ...mapActions('family', ['joinFamily']),
    
    async handleJoin() {
      if (!this.inviteCode.trim()) {
        uni.showToast({
          title: '请输入邀请码',
          icon: 'none'
        })
        return
      }
      
      if (this.loading) return
      
      this.loading = true
      
      try {
        const family = await this.joinFamily(this.inviteCode.trim())
        
        uni.showToast({
          title: '加入家庭成功！',
          icon: 'success'
        })
        
        // 延迟跳转到首页
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/index/index'
          })
        }, 1500)
        
      } catch (error) {
        console.error('加入家庭失败:', error)
        
        // 显示具体的错误信息
        let errorMessage = '加入家庭失败'
        if (error.message) {
          errorMessage = error.message
        } else if (typeof error === 'string') {
          errorMessage = error
        }
        
        uni.showToast({
          title: errorMessage,
          icon: 'none',
          duration: 2000
        })
      } finally {
        this.loading = false
      }
    },
    
    // 扫码加入（预留接口）
    scanQRCode() {
      uni.scanCode({
        success: (res) => {
          console.log('扫码结果:', res)
          // 假设二维码内容是邀请码
          if (res.result) {
            this.inviteCode = res.result
          }
        },
        fail: (error) => {
          console.error('扫码失败:', error)
          uni.showToast({
            title: '扫码失败',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.join-family-container {
  padding: 40rpx;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .title {
    display: block;
    font-size: 48rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.form-section {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;
}

.input-group {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .input-container {
    position: relative;
    display: flex;
    align-items: center;
    
    .input {
      flex: 1;
      height: 88rpx;
      border: 1px solid #ddd;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      
      &[disabled] {
        background-color: #f5f5f5;
        color: #999;
      }
    }
    
    .scan-btn {
      position: absolute;
      right: 10rpx;
      width: 60rpx;
      height: 60rpx;
      background: #f0f0f0;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .scan-icon {
        font-size: 32rpx;
      }
      
      &:active {
        background: #e0e0e0;
      }
    }
  }
}

.join-btn {
  width: 100%;
  height: 88rpx;
  background: #007AFF;
  color: white;
  border: none;
  border-radius: 44rpx;
  font-size: 32rpx;
  margin-bottom: 30rpx;
  
  &[disabled] {
    opacity: 0.5;
  }
  
  &.loading {
    background: #999;
  }
}

.tips {
  .tip-text {
    font-size: 24rpx;
    color: #666;
    line-height: 1.6;
  }
}
</style> 